<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>和平精英 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        pubg: {
                            primary: '#FF4D4F',
                            secondary: '#FF7A45',
                            accent: '#FFA940',
                            dark: '#1890FF',
                            light: '#F0F2F5',
                            success: '#52C41A',
                            warning: '#FAAD14',
                            danger: '#FF4D4F',
                            darkblue: '#121A2E',
                            gold: '#F3D19E'
                        }
                    },
                    fontFamily: {
                        pubg: ['Arial', 'Microsoft YaHei', 'sans-serif'],
                    },
                    boxShadow: {
                        'pubg': '0 4px 12px rgba(255, 77, 79, 0.3)',
                        'pubg-hover': '0 6px 16px rgba(255, 77, 79, 0.4)',
                    },
                    animation: {
                        'float': 'float 3s ease-in-out infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'slide-up': 'slideUp 0.5s ease-out',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-blur {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-shadow-sm {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            }
            .bg-gradient-pubg {
                background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
            }
            .bg-gradient-pubg-dark {
                background: linear-gradient(135deg, #121A2E 0%, #252F48 100%);
            }
            .scale-hover {
                transition: transform 0.3s ease;
            }
            .scale-hover:hover {
                transform: scale(1.03);
            }
            .input-focus {
                transition: all 0.3s ease;
            }
            .input-focus:focus {
                border-color: #FF4D4F;
                box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.2);
                outline: none;
            }
            .form-shake {
                animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
            }
            @keyframes shake {
                10%, 90% { transform: translateX(-2px); }
                20%, 80% { transform: translateX(4px); }
                30%, 50%, 70% { transform: translateX(-8px); }
                40%, 60% { transform: translateX(8px); }
            }
        }
    </style>
</head>
<body class="font-pubg bg-gradient-pubg-dark min-h-screen overflow-hidden">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 -z-10">
        <!-- 背景图片 -->
        <div class="absolute inset-0 bg-black opacity-60"></div>
        <!-- 动态光晕 -->
        <div class="absolute top-1/4 -right-40 w-80 h-80 bg-pubg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
        <div class="absolute bottom-1/3 -left-40 w-80 h-80 bg-pubg-accent/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s"></div>
        <div class="absolute top-1/2 left-1/3 w-80 h-80 bg-pubg-dark/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 2s"></div>
        <!-- 网格纹理 -->
        <div class="absolute inset-0 bg-[url('')] opacity-30"></div>
    </div>
    
    <!-- 主容器 -->
    <div class="container mx-auto px-4 py-12 flex flex-col md:flex-row items-center justify-center min-h-screen">
        <!-- 左侧品牌信息 -->
        <div class="hidden lg:flex lg:w-1/2 flex-col items-center justify-center space-y-8 mb-8 lg:mb-0 animate-float">
            <div class="relative">
                <!-- 品牌Logo -->
                <div class="w-64 h-64 relative">
                    <div class="absolute inset-0 bg-pubg-primary/20 rounded-full blur-xl"></div>
                    <div class="absolute inset-0 flex items-center justify-center">
                            <img src="https://via.placeholder.com/224x224?text=和平精英" alt="和平精英" class="w-56 h-auto object-contain">
                        </div>
                </div>
                
                <!-- 动态粒子效果 -->
                <div id="particles-container" class="absolute inset-0 pointer-events-none"></div>
            </div>
            
            <!-- 标语 -->
            <div class="text-center space-y-4">
                <h2 class="text-[clamp(1.5rem,4vw,2.5rem)] font-bold text-white text-shadow leading-tight">
                    和平精英<br>
                    <span class="text-pubg-gold text-[clamp(1.2rem,3vw,2rem)]">精英集结，共创和平</span>
                </h2>
                <p class="text-gray-300 text-lg max-w-md text-shadow-sm">
                    体验最真实的军事竞赛体验手游，与好友一起战斗到最后！
                </p>
            </div>
            
            <!-- 版本信息 -->
            <div class="text-gray-400 text-sm mt-4">
                <span>版本 1.25.36</span>
                <span class="mx-2">|</span>
                <span>版权所有 © 光子工作室群</span>
            </div>
        </div>
        
        <!-- 右侧登录表单 -->
        <div class="w-full lg:w-1/3 max-w-md animate-slide-up">
            <div class="bg-white/10 bg-blur rounded-xl backdrop-blur-md shadow-pubg p-8 scale-hover">
                <!-- 登录标题 (移动端) -->
                <div class="lg:hidden flex justify-center mb-8">
                        <img src="https://via.placeholder.com/160x160?text=和平精英" alt="和平精英" class="w-40 h-auto object-contain">
                    </div>
                
                <!-- 登录选项卡 -->
                <div class="flex border-b border-white/20 mb-8">
                    <button id="account-tab" class="flex-1 py-3 text-center font-medium text-white border-b-2 border-pubg-primary">账号密码登录</button>
                    <button id="wechat-tab" class="flex-1 py-3 text-center font-medium text-white/70">微信登录</button>
                </div>
                
                <!-- 账号密码登录表单 -->
                <form id="account-form" class="space-y-6">
                    <!-- 账号 -->
                    <div class="space-y-2">
                        <label for="account" class="block text-sm font-medium text-white/90">QQ账号/微信账号</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fa fa-user text-white/50"></i>
                            </div>
                            <input type="text" id="account" name="account" class="w-full pl-12 pr-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请输入账号" required>
                        </div>
                    </div>
                    
                    <!-- 密码 -->
                    <div class="space-y-2">
                        <div class="flex items-center justify-between">
                            <label for="password" class="block text-sm font-medium text-white/90">密码</label>
                            <div class="flex items-center space-x-4">
                                <a href="#" id="forgot-password" class="text-sm text-pubg-gold hover:text-white transition-colors">忘记密码？</a>
                                <a href="#" id="register-account" class="text-sm text-pubg-gold hover:text-white transition-colors">注册账号</a>
                            </div>
                        </div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                <i class="fa fa-lock text-white/50"></i>
                            </div>
                            <input type="password" id="password" name="password" class="w-full pl-12 pr-12 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请输入密码" required>
                            <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 pr-4 flex items-center text-white/50 hover:text-white transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" id="login-button" class="w-full bg-gradient-pubg hover:opacity-90 text-white font-bold py-3 px-4 rounded-lg shadow-pubg transition-all flex items-center justify-center space-x-2">
                        <span>登录游戏</span>
                        <i class="fa fa-arrow-right"></i>
                    </button>
                    
                    <!-- 第三方登录 -->
                    <div class="space-y-4">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-white/20"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="px-4 bg-transparent text-white/60">其他登录方式</span>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-4">
                            <button type="button" class="flex flex-col items-center justify-center h-16 w-full bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all">
                                <i class="fa fa-qq text-blue-400 text-2xl mb-1"></i>
                                <span class="text-xs text-white/70">QQ登录</span>
                            </button>
                            <button type="button" class="flex flex-col items-center justify-center h-16 w-full bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all">
                                <i class="fa fa-mobile text-green-400 text-2xl mb-1"></i>
                                <span class="text-xs text-white/70">手机登录</span>
                            </button>
                            <button type="button" class="flex flex-col items-center justify-center h-16 w-full bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 transition-all">
                                <i class="fa fa-weibo text-red-400 text-2xl mb-1"></i>
                                <span class="text-xs text-white/70">微博登录</span>
                            </button>
                        </div>
                    </div>
                </form>
                
                <!-- 微信登录表单 (默认隐藏) -->
                <form id="wechat-form" class="space-y-6 hidden">
                    <div class="text-center space-y-6">
                        <!-- 微信登录图标 -->
                        <div class="w-32 h-32 mx-auto bg-white/5 rounded-full flex items-center justify-center border border-white/10">
                            <i class="fa fa-weixin text-green-400 text-6xl animate-float"></i>
                        </div>
                        
                        <!-- 提示文字 -->
                        <div class="space-y-2">
                            <h3 class="text-xl font-medium text-white">微信安全登录</h3>
                            <p class="text-sm text-white/60">请使用微信扫描二维码登录</p>
                        </div>
                        
                        <!-- 二维码区域 -->
                        <div class="w-48 h-48 mx-auto bg-white p-2 rounded-lg shadow-lg">
                            <div class="w-full h-full bg-gray-100 flex items-center justify-center">
                                <!-- 这里应该是微信登录二维码，这里用模拟图表示 -->
                                <div class="text-center p-4">
                                    <i class="fa fa-qrcode text-4xl text-gray-400 mb-2"></i>
                                    <p class="text-xs text-gray-500">微信扫码区</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 二维码刷新 -->
                        <div class="text-xs text-white/60 flex items-center justify-center">
                            <i class="fa fa-clock-o mr-1"></i>
                            <span id="qrcode-timeout">60</span>秒后自动刷新
                            <a href="#" id="refresh-qrcode" class="ml-2 text-pubg-gold hover:text-white transition-colors">刷新</a>
                        </div>
                    </div>
                </form>
            </div>
            
            <!-- 安全提示 -->
            <div class="mt-6 p-4 bg-white/5 rounded-lg border border-white/10">
                <div class="flex items-start space-x-3">
                    <i class="fa fa-shield text-pubg-gold mt-0.5"></i>
                    <div>
                        <p class="text-xs text-white/80 space-y-1">
                            <span>• 为保障账号安全，请不要在第三方平台登录游戏</span><br>
                            <span>• 谨防诈骗，不要轻信游戏内的非官方活动信息</span><br>
                            <span>• 未成年人请在监护人指导下使用本游戏</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 公告横幅 -->
    <div class="fixed bottom-4 left-0 right-0 z-30">
        <div class="container mx-auto px-4">
            <div class="bg-white/10 bg-blur rounded-full border border-white/20 px-6 py-2 text-white/80 text-sm flex items-center justify-between scale-hover animate-slide-up" style="animation-delay: 0.6s">
                <div class="flex items-center space-x-3">
                    <i class="fa fa-bullhorn text-pubg-gold"></i>
                    <span class="truncate max-w-md">【版本更新公告】和平精英2024年度版本已更新，全新地图、武器和玩法等你来体验！</span>
                </div>
                <button id="close-notice" class="text-white/50 hover:text-white transition-colors">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 弹窗容器 -->
    <div id="modal-container" class="fixed inset-0 z-50 hidden items-center justify-center">
        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
        <div id="modal-content" class="relative bg-darkblue/90 bg-blur border border-white/10 rounded-xl shadow-pubg-hover p-6 max-w-md w-full mx-4 scale-hover animate-slide-up">
            <!-- 弹窗内容将通过JS动态生成 -->
        </div>
    </div>
    
    <!-- 页面脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换
            const accountTab = document.getElementById('account-tab');
            const wechatTab = document.getElementById('wechat-tab');
            const accountForm = document.getElementById('account-form');
            const wechatForm = document.getElementById('wechat-form');
            
            accountTab.addEventListener('click', function() {
                accountTab.classList.add('text-white', 'border-b-2', 'border-pubg-primary');
                accountTab.classList.remove('text-white/70');
                wechatTab.classList.remove('text-white', 'border-b-2', 'border-pubg-primary');
                wechatTab.classList.add('text-white/70');
                accountForm.classList.remove('hidden');
                wechatForm.classList.add('hidden');
            });
            
            wechatTab.addEventListener('click', function() {
                wechatTab.classList.add('text-white', 'border-b-2', 'border-pubg-primary');
                wechatTab.classList.remove('text-white/70');
                accountTab.classList.remove('text-white', 'border-b-2', 'border-pubg-primary');
                accountTab.classList.add('text-white/70');
                wechatForm.classList.remove('hidden');
                accountForm.classList.add('hidden');
                startQrcodeTimer(); // 开始二维码倒计时
                startWechatLoginCheck(); // 开始检测微信登录状态
            });
            
            // 密码可见性切换
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password');
            
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                const icon = togglePassword.querySelector('i');
                if (type === 'password') {
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
            
            // 账号登录表单提交
            const loginForm = document.getElementById('account-form');
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const account = document.getElementById('account').value.trim();
                const password = document.getElementById('password').value;
                
                // 简单验证
                if (!account || !password) {
                    loginForm.classList.add('form-shake');
                    setTimeout(() => {
                        loginForm.classList.remove('form-shake');
                    }, 600);
                    return;
                }
                
                // 模拟登录请求
                showLoadingModal('登录中...');
                
                setTimeout(() => {
                    hideModal();
                    showSuccessModal('登录成功，正在进入游戏...');
                    
                    // 2秒后跳转到加载页面
                    setTimeout(() => {
                        console.log('进入游戏', { account });
                        // 保存玩家名称到localStorage，以便在加载页面显示
                        localStorage.setItem('pubgPlayerName', account);
                        // 跳转到加载页面
                        window.location.href = 'pubg-loading.html';
                    }, 2000);
                }, 1500);
            });
            
            // 微信登录二维码倒计时
            let qrcodeTimer;
            function startQrcodeTimer() {
                clearInterval(qrcodeTimer);
                let seconds = 60;
                const timerElement = document.getElementById('qrcode-timeout');
                timerElement.textContent = seconds;
                
                qrcodeTimer = setInterval(() => {
                    seconds--;
                    timerElement.textContent = seconds;
                    
                    if (seconds <= 0) {
                        clearInterval(qrcodeTimer);
                        // 模拟刷新二维码
                        refreshQrcode();
                    }
                }, 1000);
            }
            
            // 刷新二维码
            document.getElementById('refresh-qrcode').addEventListener('click', function(e) {
                e.preventDefault();
                refreshQrcode();
                // 刷新二维码后重新开始检测登录状态
                startWechatLoginCheck();
            });
            
            // 模拟微信登录检测
            let wechatLoginCheckTimer;
            function startWechatLoginCheck() {
                clearInterval(wechatLoginCheckTimer);
                
                // 模拟在10-20秒内随机检测到登录成功
                const loginSuccessTime = 10000 + Math.random() * 10000;
                
                wechatLoginCheckTimer = setTimeout(() => {
                    // 模拟微信登录成功
                    console.log('微信登录成功');
                    showSuccessModal('微信登录成功，正在进入游戏...');
                    
                    // 2秒后跳转到加载页面
                    setTimeout(() => {
                        // 保存玩家名称到localStorage，使用微信用户加随机数
                        const playerName = `微信用户${Math.floor(Math.random() * 1000000)}`;
                        localStorage.setItem('pubgPlayerName', playerName);
                        // 跳转到加载页面
                        window.location.href = 'pubg-loading.html';
                    }, 2000);
                }, loginSuccessTime);
            }
            
            function refreshQrcode() {
                // 显示加载动画
                showLoadingModal('刷新二维码中...');
                
                setTimeout(() => {
                    hideModal();
                    startQrcodeTimer();
                    showSuccessModal('二维码已刷新，请重新扫描');
                }, 800);
            }
            
            // 第三方登录按钮
            const thirdPartyButtons = document.querySelectorAll('#account-form button[type="button"]');
            thirdPartyButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const platform = this.querySelector('span').textContent;
                    
                    showLoadingModal(`正在跳转到${platform}...`);
                    
                    setTimeout(() => {
                        hideModal();
                        showSuccessModal(`${platform}授权成功，正在进入游戏...`);
                        
                        // 2秒后跳转到加载页面
                        setTimeout(() => {
                            console.log(`使用${platform}登录`);
                            // 保存玩家名称到localStorage，使用平台名称加随机数
                            const playerName = `${platform}玩家${Math.floor(Math.random() * 1000000)}`;
                            localStorage.setItem('pubgPlayerName', playerName);
                            // 跳转到加载页面
                            window.location.href = 'pubg-loading.html';
                        }, 2000);
                    }, 1500);
                });
            });
            
            // 忘记密码
            document.getElementById('forgot-password').addEventListener('click', function(e) {
                e.preventDefault();
                showForgotPasswordModal();
            });
            
            // 注册账号
            document.getElementById('register-account').addEventListener('click', function(e) {
                e.preventDefault();
                showRegisterAccountModal();
            });
            
            // 关闭公告
            document.getElementById('close-notice').addEventListener('click', function() {
                const noticeBanner = this.closest('.fixed');
                noticeBanner.style.display = 'none';
            });
            
            // 模态框函数
            const modalContainer = document.getElementById('modal-container');
            const modalContent = document.getElementById('modal-content');
            
            function showModal() {
                modalContainer.classList.remove('hidden');
                modalContainer.classList.add('flex');
            }
            
            function hideModal() {
                modalContainer.classList.add('hidden');
                modalContainer.classList.remove('flex');
                modalContent.innerHTML = '';
            }
            
            function showLoadingModal(message) {
                modalContent.innerHTML = `
                    <div class="text-center py-8 space-y-4">
                        <div class="w-16 h-16 mx-auto border-4 border-pubg-gold/30 border-t-pubg-gold rounded-full animate-spin"></div>
                        <p class="text-white">${message}</p>
                    </div>
                `;
                showModal();
            }
            
            function showSuccessModal(message) {
                modalContent.innerHTML = `
                    <div class="text-center py-8 space-y-6">
                        <div class="w-16 h-16 mx-auto bg-pubg-success/20 rounded-full flex items-center justify-center">
                            <i class="fa fa-check text-2xl text-pubg-success"></i>
                        </div>
                        <p class="text-white">${message}</p>
                        <button id="success-confirm" class="mt-4 px-6 py-2 bg-pubg-primary hover:bg-pubg-primary/90 text-white font-medium rounded-lg transition-all">确定</button>
                    </div>
                `;
                showModal();
                
                document.getElementById('success-confirm').addEventListener('click', hideModal);
            }
            
            function showForgotPasswordModal() {
                modalContent.innerHTML = `
                    <div class="space-y-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-xl font-bold text-white">找回密码</h3>
                            <button id="close-modal" class="text-white/50 hover:text-white transition-colors">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label for="forgot-account" class="block text-sm font-medium text-white/90 mb-1">账号</label>
                                <input type="text" id="forgot-account" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请输入账号">
                            </div>
                            
                            <div>
                                <label for="forgot-verify-code" class="block text-sm font-medium text-white/90 mb-1">验证码</label>
                                <div class="flex space-x-3">
                                    <input type="text" id="forgot-verify-code" class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请输入验证码">
                                    <button type="button" id="send-verify-code" class="w-32 bg-white/10 border border-white/20 hover:bg-white/20 text-white font-medium rounded-lg transition-all">获取验证码</button>
                                </div>
                            </div>
                        </div>
                        
                        <button id="submit-forgot" class="w-full bg-pubg-primary hover:bg-pubg-primary/90 text-white font-bold py-3 rounded-lg transition-all">提交</button>
                    </div>
                `;
                showModal();
                
                document.getElementById('close-modal').addEventListener('click', hideModal);
                document.getElementById('send-verify-code').addEventListener('click', function() {
                    const account = document.getElementById('forgot-account').value.trim();
                    if (!account) {
                        showSuccessModal('请输入账号');
                        return;
                    }
                    
                    // 倒计时
                    let countdown = 60;
                    this.disabled = true;
                    this.classList.add('bg-white/5');
                    this.classList.remove('hover:bg-white/20');
                    
                    const timer = setInterval(() => {
                        countdown--;
                        this.textContent = `${countdown}秒后重发`;
                        
                        if (countdown <= 0) {
                            clearInterval(timer);
                            this.disabled = false;
                            this.textContent = '获取验证码';
                            this.classList.remove('bg-white/5');
                            this.classList.add('hover:bg-white/20');
                        }
                    }, 1000);
                    
                    showSuccessModal('验证码已发送');
                });
                
                document.getElementById('submit-forgot').addEventListener('click', function() {
                    const account = document.getElementById('forgot-account').value.trim();
                    const verifyCode = document.getElementById('forgot-verify-code').value.trim();
                    
                    if (!account || !verifyCode) {
                        showSuccessModal('请填写完整信息');
                        return;
                    }
                    
                    hideModal();
                    showSuccessModal('密码重置链接已发送，请查收');
                });
            }
            
            function showRegisterAccountModal() {
                modalContent.innerHTML = `
                    <div class="space-y-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-xl font-bold text-white">注册账号</h3>
                            <button id="close-modal" class="text-white/50 hover:text-white transition-colors">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="space-y-4">
                            <div>
                                <label for="register-account-input" class="block text-sm font-medium text-white/90 mb-1">账号</label>
                                <input type="text" id="register-account-input" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请设置账号">
                            </div>
                            
                            <div>
                                <label for="register-password-input" class="block text-sm font-medium text-white/90 mb-1">密码</label>
                                <input type="password" id="register-password-input" class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请设置密码">
                            </div>
                            
                            <div>
                                <label for="register-verify-code" class="block text-sm font-medium text-white/90 mb-1">验证码</label>
                                <div class="flex space-x-3">
                                    <input type="text" id="register-verify-code" class="flex-1 px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 input-focus" placeholder="请输入验证码">
                                    <button type="button" id="send-register-code" class="w-32 bg-white/10 border border-white/20 hover:bg-white/20 text-white font-medium rounded-lg transition-all">获取验证码</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <input type="checkbox" id="agree-terms" class="h-4 w-4 mt-1 text-pubg-primary border-white/30 rounded focus:ring-pubg-primary">
                            <label for="agree-terms" class="ml-2 block text-xs text-white/70">
                                我已阅读并同意<a href="#" class="text-pubg-gold hover:text-white transition-colors">《用户协议》</a>和<a href="#" class="text-pubg-gold hover:text-white transition-colors">《隐私政策》</a>
                            </label>
                        </div>
                        
                        <button id="submit-register" class="w-full bg-pubg-primary hover:bg-pubg-primary/90 text-white font-bold py-3 rounded-lg transition-all">注册</button>
                    </div>
                `;
                showModal();
                
                document.getElementById('close-modal').addEventListener('click', hideModal);
                document.getElementById('send-register-code').addEventListener('click', function() {
                    const account = document.getElementById('register-account-input').value.trim();
                    if (!account) {
                        showSuccessModal('请设置账号');
                        return;
                    }
                    
                    // 倒计时
                    let countdown = 60;
                    this.disabled = true;
                    this.classList.add('bg-white/5');
                    this.classList.remove('hover:bg-white/20');
                    
                    const timer = setInterval(() => {
                        countdown--;
                        this.textContent = `${countdown}秒后重发`;
                        
                        if (countdown <= 0) {
                            clearInterval(timer);
                            this.disabled = false;
                            this.textContent = '获取验证码';
                            this.classList.remove('bg-white/5');
                            this.classList.add('hover:bg-white/20');
                        }
                    }, 1000);
                    
                    showSuccessModal('验证码已发送');
                });
                
                document.getElementById('submit-register').addEventListener('click', function() {
                    const account = document.getElementById('register-account-input').value.trim();
                    const password = document.getElementById('register-password-input').value;
                    const verifyCode = document.getElementById('register-verify-code').value.trim();
                    const agreeTerms = document.getElementById('agree-terms').checked;
                    
                    if (!account || !password || !verifyCode) {
                        showSuccessModal('请填写完整信息');
                        return;
                    }
                    
                    if (!agreeTerms) {
                        showSuccessModal('请阅读并同意用户协议和隐私政策');
                        return;
                    }
                    
                    hideModal();
                    showSuccessModal('注册成功，请登录');
                });
            }
            
            // 点击模态框背景关闭
            modalContainer.addEventListener('click', function(e) {
                if (e.target === modalContainer) {
                    hideModal();
                }
            });
            
            // 创建粒子效果
            createParticles();
            
            function createParticles() {
                const container = document.getElementById('particles-container');
                if (!container) return;
                
                const particleCount = 20;
                
                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    
                    // 随机大小、位置和颜色
                    const size = Math.random() * 4 + 1;
                    const x = Math.random() * 100;
                    const y = Math.random() * 100;
                    const color = `rgba(${255}, ${Math.floor(Math.random() * 100 + 50)}, ${Math.floor(Math.random() * 100 + 50)}, ${Math.random() * 0.6 + 0.2})`;
                    
                    // 设置样式
                    particle.style.position = 'absolute';
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.backgroundColor = color;
                    particle.style.borderRadius = '50%';
                    particle.style.left = `${x}%`;
                    particle.style.top = `${y}%`;
                    particle.style.animation = `float ${Math.random() * 3 + 2}s ease-in-out infinite`;
                    particle.style.animationDelay = `${Math.random() * 2}s`;
                    
                    container.appendChild(particle);
                }
            }
            
            // 模拟系统公告自动关闭
            setTimeout(() => {
                const noticeBanner = document.querySelector('.fixed.bottom-4');
                if (noticeBanner) {
                    noticeBanner.style.opacity = '0';
                    noticeBanner.style.transition = 'opacity 0.5s ease';
                    setTimeout(() => {
                        noticeBanner.style.display = 'none';
                    }, 500);
                }
            }, 8000);
        });
    </script>
</body>
</html>